<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>

    <!-- <link rel="stylesheet" type="text/css" th:href="@{../../static/css/Login.css}" />
     <script type="text/javascript" src="../../static/js/jquery-1.11.3.min.js"></script>-->
    <style type="text/css">
        #s1{
            float: left;
            margin: 50px 0px 0px 120px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function f1(){
            //1-5个汉字
            var regx = /^[a-zA-Z][a-zA-Z0-9_]*$/;
            var username = document.getElementById("name").value;
            if(regx.test(username)){
                document.getElementById("d1").style.color = "green";
                document.getElementById("d1").innerHTML="√";
                return true;
            }else{
                document.getElementById("d1").style.color = "red";
                document.getElementById("d1").innerHTML="×";
                return false;
            }
        }
        function f2(){
            //5-12个字母或汉字
            var regx = /^[a-zA-Z0-9]{5,12}$/;
            var password = document.getElementById("password").value;
            if(regx.test(password)){
                document.getElementById("d2").style.color = "green";
                document.getElementById("d2").innerHTML="√";
                return true;
            }else{
                document.getElementById("d2").style.color = "red";
                document.getElementById("d2").innerHTML="×";
                return false;
            }
        }
        function subForm(){
            if(f1()&&f2()){
                return true;
            }
            return false;
        }

        $(document).ready(function () {
            // 执行代码

            $("#loginButton").click(function () {

                var name = $("#name").val();
                var birth = $("#birth").val();
                var phone_number = $("#phone_number").val();
                var passwd = $("#passwd").val();


                $.ajax({
                    url: "/RegisterAdminister",
                    type: 'POST',
                    data: {
                        'name': name,
                        'birth':birth,
                        'phone_number':phone_number,
                        'passwd': passwd
                    },
                    dataType: 'text',
                    success: function (result) {
                        if (result == 'Succeed') {
                            alert("OK");
                        } else {
                            alert("用户名或密码错误！！！");
                        }
                    },
                    error: function (xhr, type) {
                        alert("Fatal Error");
                    }
                });
            });


        });
    </script>
</head>
<body>
<form action="/RegisterAdministerPage" method="get" onsubmit="return subForm()">
    <table>
        <tr>
            <td> <span>Name：</span></td>
            <td><input id="name" type="text" name="name" placeholder="name" onblur="f1()"></td>
        </tr>
        <tr>
            <td>
                <span>Birth：</span>
            </td>
            <td><input id="birth" type="text" name="birth" placeholder="birth" onblur="f1()"></td>
        </tr>
        <tr>
            <td>
                <span>Phone_number：</span>
            </td>
            <td><input id="phone_number" type="text" name="phone_number" placeholder="phone_number" onblur="f1()"></td>
        </tr>
        <tr>
            <td>
                <span>PassWD：</span>
            </td>
            <td><input id="passwd" type="text" name="passwd" placeholder="passwd" onblur="f2()"><span id="d2"></span></td>
        </tr>
        <tr>
            <button id="loginButton">
                confirm
            </button>
        </tr>
    </table>
</form>
</body>
</html>